<template>
  <div class="app-container">
    <el-form :inline="true" :model="queryParams" label-width="98px" ref="queryForm" size="small" v-show="showSearch">
      <el-form-item label="订单编号" prop="code">
        <el-input @keyup.enter.native="handleQuery" clearable placeholder="请输入订单编号" v-model="queryParams.code" size="mini" />
      </el-form-item>
      <el-form-item label="业务员" prop="salesmanId">
        <el-select v-model="queryParams.salesmanId" placeholder="请选择业务员" filterable clearable style="width: 100%"  size="mini">
          <el-option v-for="item in salesmanList" :key="item.userId" :label="item.nickName" :value="item.userId"/>
        </el-select>
      </el-form-item>
      <el-form-item label="买方名称" prop="customName">
        <el-input @keyup.enter.native="handleQuery" clearable placeholder="请输入买方名称" size="mini"
                  v-model="queryParams.customName"/>
      </el-form-item>

      <el-form-item label="制单人" prop="createName">
        <el-input @keyup.enter.native="handleQuery" clearable placeholder="请输入制单人" size="mini"
                  v-model="queryParams.createName"/>
      </el-form-item>
      <el-form-item label="下单日期" prop="orderDate">
        <el-date-picker clearable v-model="queryParams.orderDate" type="date" value-format="yyyy-MM-dd" size="mini" placeholder="请选择下单日期">
        </el-date-picker>
      </el-form-item>
      <el-form-item label="项目状态" prop="status">
        <el-select clearable placeholder="请选择项目状态" style="width: 200px" v-model="queryParams.status" size="mini">
          <el-option :key="dict.value" :label="dict.label" :value="dict.value" v-for="dict in dict.type.pro_status"/>
        </el-select>
      </el-form-item>

      <el-form-item label="订单类别" prop="goodsType">
        <el-select clearable placeholder="选择订单类别" style="width: 200px" v-model="queryParams.goodsType" size="mini">
          <el-option :key="dict.value" :label="dict.label" :value="dict.value"
                     v-for="dict in dict.type.order_goods_type"/>
        </el-select>
      </el-form-item>

      <el-form-item>
        <el-button @click="handleQuery" icon="el-icon-search" size="mini" type="primary">搜索</el-button>
        <el-button @click="resetQuery" icon="el-icon-refresh" size="mini">重置</el-button>
        <el-button type="warning" plain icon="el-icon-document" :disabled="multiple" size="mini"
                   style="margin-left:10px;" @click="handleGoodsMerge()">产品合计
        </el-button>
        <el-button type="warning" plain icon="el-icon-document" :disabled="multiple" size="mini"
                   style="margin-left:10px;" @click="handleGoodsNoMerge()">不合并产品的合计
        </el-button>
      </el-form-item>
    </el-form>

    <el-table :data="dataList" @sort-change="handleSortChange" :max-height="tableMaxHeight"
    style="width: 100%"   @selection-change="handleSelectionChange" v-loading="loading">
      <el-table-column align="center" type="selection" width="55"/>
      <el-table-column  align="center" label="框架编号" prop="projectCode"/>
      <el-table-column sortable align="center"  label="订单编号" prop="code">
        <template slot-scope="scope">
          <el-tooltip class="item" content="点击查看详情" effect="dark" placement="left-start">
            <span @click="handleUpdateDetail(scope.row)" style="color: #00afff;cursor:pointer;">
              {{scope.row.code}}</span>
          </el-tooltip>
        </template>
      </el-table-column>
      <el-table-column sortable align="center" label="合同交货期" prop="deliveryTime"/>
      <el-table-column sortable align="center" label="下单时间" prop="orderDate"/>
      <el-table-column sortable align="center" label="买方" prop="customName"/>
      <el-table-column sortable align="center" label="业务员" prop="salesmanName"/>
      <el-table-column sortable align="center" label="制单人" prop="createName"/>
      <el-table-column sortable align="center" label="项目状态" prop="status">
        <template slot-scope="scope">
          <dict-tag :options="dict.type.pro_status" :value="scope.row.status"/>
        </template>
      </el-table-column>
      <el-table-column sortable align="center" label="地区" prop="area">
        <template slot-scope="scope">
          <dict-tag :options="dict.type.order_area" :value="scope.row.area"/>
        </template>
      </el-table-column>
      <el-table-column sortable align="center" label="来源" prop="source">
        <template slot-scope="scope">
          <dict-tag :options="dict.type.project_source" :value="scope.row.source"/>
        </template>
      </el-table-column>
     <!-- <el-table-column sortable align="center" label="订单类型" prop="goodsType">
        <template slot-scope="scope">
          <dict-tag :options="dict.type.order_goods_type" :value="scope.row.goodsType"/>
        </template>
      </el-table-column>-->
      <el-table-column sortable align="center"  label="订单金额" prop="contractMoney">
        <template slot-scope="scope">
          <el-tooltip class="item" content="点击查看详情" effect="dark" placement="left-start">
            <span @click="shedinggongxu(scope.row)" style="color: green;font-weight: bold;cursor:pointer;">
              {{scope.row.contractMoney}}</span>
          </el-tooltip>
        </template>
      </el-table-column>
     <!-- <el-table-column align="center" label="开票金额" prop="taxAll"/>-->
      <el-table-column sortable align="center"  label="开票金额" prop="taxAll">
        <template slot-scope="scope">
          <el-tooltip class="item" content="点击查看详情" effect="dark" placement="left-start">
            <span @click="sheowTaxAll(scope.row)" style="color: red;font-weight: bold;cursor:pointer;">
              {{scope.row.taxAll}}</span>
          </el-tooltip>
        </template>
      </el-table-column>
      <el-table-column sortable align="center"  label="未开票金额" prop="taxRemain">
        <template slot-scope="scope">
          <el-tooltip class="item" content="点击查看详情" effect="dark" placement="left-start">
            <span @click="sheowTaxAll(scope.row)" style="color: red;font-weight: bold;cursor:pointer;">
              {{scope.row.taxRemain}}</span>
          </el-tooltip>
        </template>
      </el-table-column>
     <!-- <el-table-column align="center" label="未开票金额" prop="taxRemain"/>-->
      <el-table-column align="center" label="回款金额" prop="backMoney">
        <template slot-scope="scope">
          <el-tooltip class="item" content="点击查看详情" effect="dark" placement="left-start">
            <span @click="sheowBackMoney(scope.row)" style="color: red;font-weight: bold;cursor:pointer;">
              {{scope.row.backMoney}}</span>
          </el-tooltip>
        </template>
      </el-table-column>
      <el-table-column align="center" label="未回款金额" prop="remainMoney">
        <template slot-scope="scope">
          <el-tooltip class="item" content="点击查看详情" effect="dark" placement="left-start">
            <span @click="sheowBackMoney(scope.row)" style="color: red;font-weight: bold;cursor:pointer;">
              {{scope.row.remainMoney}}</span>
          </el-tooltip>
        </template>
      </el-table-column>
      <el-table-column align="center" label="费用金额" prop="feeMoney">
        <template slot-scope="scope">
          <el-tooltip class="item" content="点击查看详情" effect="dark" placement="left-start">
            <span @click="sheowFeeMoney(scope.row)" style="color: red;font-weight: bold;cursor:pointer;">
              {{scope.row.feeMoney}}</span>
          </el-tooltip>
        </template>
      </el-table-column>
      <el-table-column align="center" label="销售成本" prop="buyMoney">
        <template slot-scope="scope">
          <el-tooltip class="item" content="点击查看详情" effect="dark" placement="left-start">
            <span @click="sheowBuyMoney(scope.row)" style="color: red;font-weight: bold;cursor:pointer;">
              {{scope.row.buyMoney}}</span>
          </el-tooltip>
        </template>
      </el-table-column>
      <el-table-column align="center" label="订单利润" prop="profitMoney">
        <template slot-scope="scope">
          <el-tooltip class="item" content="点击查看详情" effect="dark" placement="left-start">
            <span @click="sheowUseMoney(scope.row)" style="color: red;font-weight: bold;cursor:pointer;">
              {{scope.row.profitMoney}}</span>
          </el-tooltip>
        </template>
      </el-table-column>
      <!--<el-table-column align="center" label="费用金额" prop="contractMoney"/>-->
     <!-- <el-table-column label="备注信息" align="center" prop="information" show-overflow-tooltip/>
      <el-table-column align="center" label="附件" prop="attachment" show-overflow-tooltip>
        <template slot-scope="scope">
          <file-upload-show :value="scope.row.attachment"></file-upload-show>
        </template>
      </el-table-column>-->
      <el-table-column align="center" class-name="small-padding fixed-width" label="操作" width="300" fixed="right" >
        <template slot-scope="scope">
          <el-button @click="shedinggongxu(scope.row)" icon="el-icon-view" size="mini" type="text">
            订单产品
          </el-button>
          <el-button @click="fahuoDeatil(scope.row)" icon="el-icon-view" size="mini" type="text">
            发货记录
          </el-button>
          <el-button v-if="scope.row.commissionStatus === '1'" @click="commissionDetail(scope.row)" icon="el-icon-money"
                     size="mini" type="text">
            提成详情
          </el-button>
        </template>
      </el-table-column>
    </el-table>

    <pagination :limit.sync="queryParams.pageSize" :page.sync="queryParams.pageNum" :total="total" @pagination="getList"
                v-show="total > 0"/>

    <goods-order-merge-list ref="goodsOrderMergeList"></goods-order-merge-list>
    <goods-order-no-merge-list ref="goodsOrderNoMergeList"></goods-order-no-merge-list>
    <allGoodsFormShow-List ref="allGoodsForm"></allGoodsFormShow-List>
    <taxAllFormShow-List ref="taxAllForm"></taxAllFormShow-List>
    <backMoneyForm-List ref="backMoneyForm"></backMoneyForm-List>
    <feeMoneyForm-List ref="feeMoneyForm"></feeMoneyForm-List>
    <buyMoneyForm-List ref="buyMoneyForm"></buyMoneyForm-List>
    <useMoneyForm-List ref="userMoneyForm"></useMoneyForm-List>
    <fahuoDeatil-form-list ref="fahuoDeatilForm" @ok="getList"></fahuoDeatil-form-list>
    <order-commission-record-detail ref="commissionDetail" @ok="getList"></order-commission-record-detail>
    <project-base-info-form-for-prj @ok="getList" ref="ProjectBaseInfoFormForPrj"></project-base-info-form-for-prj>

  </div>
</template>

<script>
import { getAction} from '@/api/manage'
//form表单
import Treeselect from "@riophae/vue-treeselect";
import "@riophae/vue-treeselect/dist/vue-treeselect.css";
import {treeselect} from "@/api/system/dept";
import GoodsOrderMergeList from "@/views/develop/projectBaseInfo/prjForGoodsIn/GoodsOrderMergeList.vue";
import GoodsOrderNoMergeList from "@/views/develop/projectBaseInfo/prjForGoodsIn/GoodsOrderNoMergeList.vue";
import AllGoodsFormShowList from "./prjForGoodsIn/AllGoodsFormShowList";
import TaxAllFormShowList from "./module/TaxAllFormShowList";
import BackMoneyFormList from "./module/BackMoneyFormList";
import FeeMoneyFormList from "./module/FeeMoneyFormList";
import BuyMoneyFormList from "./module/BuyMoneyFormList";
import UseMoneyFormList from "./module/UseMoneyFormList";
import FahuoDeatilFormList from '@/views/develop/lvYifahuomingxi/module/FahuoDeatilFormList'
import OrderCommissionRecordDetail from "@/views/develop/orderCommissionRecord/module/OrderCommissionRecordDetail.vue";
import ProjectBaseInfoFormForPrj from "./module/ProjectBaseInfoFormForPrj";

export default {
  name: "ProjectCountTj",
  dicts: ['yes_no', 'fund_callback', 'fund_status', 'tax_status', 'pro_status', 'order_area', 'order_goods_type',"project_source"],
  components: {
    GoodsOrderMergeList,
    ProjectBaseInfoFormForPrj,
    GoodsOrderNoMergeList,
    AllGoodsFormShowList,
    FahuoDeatilFormList,
    BackMoneyFormList,
    FeeMoneyFormList,
    BuyMoneyFormList,
    UseMoneyFormList,
    OrderCommissionRecordDetail,
    Treeselect,
    TaxAllFormShowList,
  },
  data() {
    return {
      // 遮罩层
      loading: true,
      // 选中数组
      ids: [],
      // 非单个禁用
      single: true,
      // 非多个禁用
      multiple: true,
      // 显示搜索条件
      showSearch: true,
      // 总条数
      total: 0,
      // 订单基础信息管理表格数据
      dataList: [],
      salesmanList: [],
      // 查询参数
      queryParams: {
        yearStr: null,
        pageNum: 1,
        pageSize: 20,
        name: null,
        status: null,
        code: null,
        master: null,
        customId: null,
        orderDate: null,
        projectCode: null,
        salesmanId: null,
        customName: null,
        companyName: null,
        contractDate: null,
        contractMoney: null,
        auditMoney: null,
        checkDate: null,
        checkState: null,
        fundCallback: null,
        createName: null,
        information: null,
        source: null,
        goodsType: null,
        orderByColumn: "create_time",
        isAsc: "desc",
        params: {},
      },
      url: {
        list: '/projectBaseInfo/projectBaseInfo/list',
        submitProject: '/projectBaseInfo/projectBaseInfo/submitProject',
        salesmanList: '/system/role/authUser/allocatedList',
      },
      tableMaxHeight: window.innerHeight - 320,
      // 部门树选项
      deptOptions: [],
      baseUrl: process.env.VUE_APP_BASE_API,
    };
  },
  created() {
    this.initQuery();
    this.getList();
    this.getTreeselect();
    this.getSalesmanList();
  },
  methods: {
    /** 排序触发事件 */
		handleSortChange(column, prop, order) {
		  this.queryParams.orderByColumn = column.prop;
		  this.queryParams.isAsc = column.order;
		  this.handleQuery();
		},
    getSalesmanList() {
      getAction(this.url.salesmanList, {"roleId": "e1c2bca31b7944e98f79008c726cf7e8"}).then(response => {
        this.salesmanList = response.rows;
      });
    },
    initQuery() {
      let that = this;
      if (that.$route.query.dataFlag) {
        that.queryParams.params.dataFlag = that.$route.query.dataFlag;
      }
    },
    /** 查询部门下拉树结构 */
    getTreeselect() {
      treeselect().then(response => {
        this.deptOptions = response.data;
      });
    },
    /** 查询项目基础信息管理列表 */
    getList() {
      this.loading = true;
      getAction(this.url.list, this.queryParams).then(response => {
        this.dataList = response.rows;
        this.total = response.total;
        this.loading = false;
      });
    },
    /** 搜索按钮操作 */
    handleQuery() {
      this.queryParams.pageNum = 1;
      this.getList();
    },
    /** 重置按钮操作 */
    resetQuery() {
      this.resetForm("queryForm");
      this.handleQuery();
    },
    // 多选框选中数据
    handleSelectionChange(selection) {
      this.ids = selection.map(item => item.id)
      this.single = selection.length !== 1
      this.multiple = !selection.length
    },

    handleGoodsMerge() {
      const ids = this.ids;
      this.$refs.goodsOrderMergeList.show(ids);
    },

    handleGoodsNoMerge() {
      const ids = this.ids;
      this.$refs.goodsOrderNoMergeList.show(ids);
    },

    shedinggongxu(row) {
      this.$refs.allGoodsForm.shedingGygx(row);
    },
    sheowTaxAll(row) {
      this.$refs.taxAllForm.sheowTaxAll(row);
    },
    fahuoDeatil(row) {
      this.$refs.fahuoDeatilForm.show(row);
    },
    commissionDetail(row) {
      this.$refs.commissionDetail.handleShowByOrderId(row);
    },
    handleUpdateDetail(row) {
      this.$refs.ProjectBaseInfoFormForPrj.handleUpdateDetail(row);
    },
    sheowBackMoney(row){
      this.$refs.backMoneyForm.sheowBackMoney(row);
    },
    sheowFeeMoney(row){
      this.$refs.feeMoneyForm.sheowFeeMoney(row);
    },
    sheowBuyMoney(row){
      this.$refs.buyMoneyForm.sheowBuyMoney(row);
    },
    sheowUseMoney(row){
      this.$refs.userMoneyForm.showUseMoney(row);
    },
  }
};
</script>
